<template>
  <view class="product-box">
    <view>
      <top-nav-bar />
      <view class="nav-box">
        <view class="item-box">
          <view v-for="(item, index) in topList" :key="index" class="row-data">
            <view class="title"> {{ $t(item.type === 1 ? 'nav.title5-1' : 'nav.title5-2') }}</view>
            <view class="name">{{ item.productTitle }}</view>
            <view class="content">
              <view class="des">
                <text>{{ $t('apply.finally.title8') }} </text>
                <text>
                  {{ $t('apply.finally.title9') }}：{{ item.minRate }}% ~ {{ item.maxRate }}%
                </text>
              </view>
              <view class="num-text">
                <text>{{ item.maxiMumStr }}</text>
                <!-- <text>
                  {{ $t('apply.finally.title9') }}：{{ item.minRate }}% ~ {{ item.maxRate }}%
                </text> -->
              </view>
            </view>
            <view class="bottom-btn">
              <button @click="onOpenChat()">
                {{ $t('service.title') }}
              </button>
              <button @click="onGo(item.type)">
                {{ $t('nav.title5') }}
              </button>
            </view>
          </view>
        </view>
      </view>
    </view>
    <foot-page />
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import http from '@/utils/request.js'
import { useUser } from '@/hooks/useUser'
import { useChat } from '@/hooks/useChat'

const { onOpenChat } = useChat()
const { needLogin } = useUser()

const topList = ref([])

// tyoe 1: 个人贷款 2: 企业贷款
const onGo = (type) => {
  const isShow = type === 2
  needLogin(isShow ? 'enterprise' : '').then((res) => {
    if (res) {
      uni.navigateTo({
        url: `/pages/apply-for/apply-for${isShow ? '?type=enterprise' : ''}`
      })
    }
  })
}

onLoad(async () => {
  topList.value = await http.get('/api/free/service/loansProduct/list', { productdisplay: 1 })
})
</script>

<style lang="scss" scoped>
.product-box {
  background: url('/static/bg/bg-top.png') no-repeat top center, #e2ecf8;
  background-size: 100%;
}

.nav-box {
  margin-top: 30rpx;

  .item-box {
    padding: 0 32rpx;

    .row-data+.row-data {
      margin-top: 30rpx;
    }

    .row-data {
      background: #fff;
      border-radius: 40rpx;
      padding: 48rpx 60rpx;
      display: flex;
      flex-direction: column;
      align-items: flex-start;

      .title {
        border-radius: 16rpx;
        background: #2230f1;
        font-size: 26rpx;
        color: #fff;
        padding: 12rpx 24rpx;
      }

      .name {
        font-weight: 700;
        font-size: 34rpx;
        color: #333;
        margin: 20rpx 0 40rpx;
      }

      .content {
        width: 100%;
        display: flex;
        flex-direction: column;
        margin-bottom: 40rpx;

        .des {
          width: 100%;
          font-size: 28rpx;
          color: #979797;
          margin-bottom: 16rpx;
          display: flex;
          justify-content: space-between;
        }

        .num-text {
          display: flex;
          align-items: baseline;

          text {
            font-size: 28rpx;
            color: #979797;

            &:first-child {
              font-size: 48rpx;
              color: #2230f1;
              font-weight: 700;
              margin-right: 20rpx;
            }
          }
        }
      }

      .bottom-btn {
        width: 100%;
        display: flex;
        justify-content: space-between;

        button {
          margin: 0;
          height: 80rpx;
          line-height: 80rpx;
          width: 49%;
          font-size: 28rpx;
          border-radius: 16rpx;
          background: #181818;
          color: #fff;

          &:first-child {
            background: #fff;
            color: #181818;
            border: 2rpx solid #181818;
            box-sizing: border-box;
            font-weight: bold;
          }
        }
      }
    }
  }
}
</style>
